<template>
  <div>
    <el-form ref="form" :model="insertform" label-width="80px">
      <div>
        <!--        第一行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="*楼盘名称">
                <el-input v-model="loupan.name" @input="loupanSelect"></el-input>
                <div class="panel panel-default col-md-12 searchResult"
                     style="display: none;background: greenyellow;z-index: 9;margin-top: -1px;width: 600px;height:300px;overflow-y:scroll;"
                     id="searchResult">
                  <span v-for="item in result" @click='selectedLoupan(item.id,item.name)'>{{
                      item.name
                    }} ({{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}{{ item.address }})</span>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="">
              <el-form-item label="">
                <el-radio-group v-model="insertform.reserve1" @change="checkRentType">
                  <el-radio value="0" :label="0">整租</el-radio>
                  <el-radio value="1" :label="1">合租</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="">
              <el-form-item label="">
                <el-radio v-model="insertform.status" :label="0">已出租</el-radio>
                <el-radio v-model="insertform.status" :label="1">未出租</el-radio>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!--        第二行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="楼栋号">
                <el-input v-model="insertform.buildingNo"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="单元号">
                <el-input v-model="insertform.unitNo"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="门牌号">
                <el-input v-model="insertform.roomNo"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <!--        第三行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-form-item label="*户型">
                <el-select v-model="insertform.room" placeholder="室">
                  <el-option label="1" :value="1"></el-option>
                  <el-option label="2" :value="2"></el-option>
                  <el-option label="3" :value="3"></el-option>
                  <el-option label="4" :value="4"></el-option>
                  <el-option label="5" :value="5"></el-option>
                  <el-option label="6" :value="6"></el-option>
                  <el-option label="7" :value="7"></el-option>
                  <el-option label="8" :value="8"></el-option>
                  <el-option label="9" :value="9"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-form-item label="厅">
                <el-select v-model="insertform.hall" placeholder="室">
                  <el-option label="0" :value="0"></el-option>
                  <el-option label="1" :value="1"></el-option>
                  <el-option label="2" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <h1></h1>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <el-form-item label="*装修状况">
                <el-select v-model="insertform.decorate" placeholder="装修">
                  <el-option label="精装" :value="0"></el-option>
                  <el-option label="简装" :value="1"></el-option>
                  <el-option label="毛坯" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!--        第四行-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple-light">
              <el-form-item label="*楼层">
                <el-input-number placeholder="楼层数" v-model="insertform.floor" controls-position="right" :min="1"
                                 :max="10"></el-input-number>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="">
                <el-input-number placeholder="所在层" v-model="insertform.floorCount" controls-position="right" :min="1"
                                 :max="10"></el-input-number>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">

            </div>
          </el-col>
        </el-row>
        <!--        第五行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="3">
            <el-form-item placeholder="请选择管家" label="*设置管家">
              <el-select v-model="insertform.manager">
                <el-option v-for="gj in manager" :label="gj.username" :value="gj.userId">{{ gj.username }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">

          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">

            </div>
          </el-col>
        </el-row>
        <!--        第六行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="3">
            <el-form-item label="*房产面积">
              <el-input-number placeholder="房产面积" v-model="insertform.proportion"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">

          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">

            </div>
          </el-col>
        </el-row>
        <!--        第七行-->
        <el-row>
          <el-col :span="3">
            <h1></h1></el-col>
          <el-col :span="4" v-if="showList">
            <el-form-item label="              *租金">
              <el-input-number placeholder="租金" v-model="addform.rental"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="*付款方式">
              <select v-model="insertform.paymentMortgage" class="form-control">
                <option v-for="option in paymentMortgageList" :value="option.id">
                  {{ option.name }}
                </option>
              </select>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label="">
              <select v-model="insertform.paymentPay" class="form-control">
                <option v-for="option in paymentPayList" :value="option.id">
                  {{ option.name }}
                </option>
              </select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第八行-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="15">
            <el-form-item label="公共配套:">
              <el-checkbox-group v-model="insertform.publicFacilityListy">
                <el-checkbox v-for="Facility in publicFacilityListy" :label="Facility.id" :value="Facility.id">
                  {{ Facility.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第九行-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="15">
            <el-form-item label="房间配套:" v-if="showList">
              <el-checkbox-group v-model="addform.privateFacilityList">
                <el-checkbox v-for="Facility in privateFacilityList" :label="Facility.id" :value="Facility.id">
                  {{ Facility.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第十行 房间区域图片-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="showList" label="房间区域图片" prop="pic">
              <el-upload
                action=""
                class="upload-demo"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                list-type="picture"
                multiple
                :auto-upload="false"
                :limit="3"
                :file-list="privateFileList"
                :on-change="handlePrivateSuccess">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button size="small" @click="ossUploadPrivateFile">点击上传</el-button><br>
          </el-col>
        </el-row>
        <!--        第十一行 公共区域图片-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公共区域图片" prop="type">
              <el-upload
                action=""
                class="upload-demo"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                list-type="picture"
                multiple
                :auto-upload="false"
                :limit="3"
                :file-list="publicFileList"
                :on-change="handlePublicSuccess">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button size="small" @click="ossUploadPublicFile">点击上传</el-button><br>
          </el-col>
        </el-row>
        <!--        第十二行-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="15">
            <el-form-item label="*房源介绍">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="insertform.introduce">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第十三行 添加房间-->
        <el-row>
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="tianjia" v-if="!showList">*添加房间</el-button>
          </el-col>
          <el-dialog title="添加房源" :visible.sync="dialogFormVisible">
            <el-form>
              <el-form-item label="*房源编号" :label-width="formLabelWidth">
                <el-input v-model="addform.roomCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="*装修风格" :label-width="formLabelWidth">
                <el-input v-model="addform.decorateStyle" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="*面积/平方米" :label-width="formLabelWidth">
                <el-input v-model="addform.proportion" placeholder="面积(平方米)" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="*朝向" :label-width="formLabelWidth">
                <select v-model="addform.direction" class="form-control">
                  <option value="2">南</option>
                  <option value="4">北</option>
                  <option value="5">东南</option>
                  <option value="7">西南</option>
                  <option value="1">东</option>
                  <option value="3">西</option>
                  <option value="6">东北</option>
                  <option value="8">西北</option>
                </select>
              </el-form-item>
              <el-form-item label="*房间配套" :label-width="formLabelWidth">
                <el-checkbox-group v-model="addform.privateFacilityList">
                  <el-checkbox v-for="Facility in privateFacilityList" :label="Facility.id" :value="Facility.id">
                    {{ Facility.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth">
                <el-form-item label="*租金">
                  <el-input-number placeholder="租金" v-model="addform.rental"></el-input-number>
                </el-form-item>
              </el-form-item>
              <el-form-item label="房间区域图片" prop="privateFileList">
                <el-upload
                  action=""
                  class="upload-demo"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  list-type="picture"
                  multiple
                  :auto-upload="false"
                  :limit="3"
                  :file-list="privateFileList"
                  :on-change="handlePrivateSuccess">
                  <el-button size="small" type="primary">选择文件</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
            </div>
          </el-dialog>
        </el-row>
        <!--        第十四行 房价列表-->
        <el-row v-if="!showList">
          <el-col :span="3">
            <h1></h1>
          </el-col>
          <el-col :span="15">
            <el-form-item>
              <div>
                <p v-for="(itme,index) in insertform.roomInfoList">
                  <!--                    <span v-for="(img,childIndex) in itme.roomImages.slice(0, 1)">-->
                  <!--                        <img height="150" width="150" v-bind:src="imgBaseUrl+img" class="margin" @click="updateRoomInfo(index)">-->
                  <!--                    </span>-->
                  <span>房源编号：{{ itme.roomCode }}</span>
                </p>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第十五行 提交-->
        <el-row>
          <el-col :span="6">
            <h1></h1>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="onSubmit">立即提交</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Tcf",
  methods: {
    loupanSelect(name) {
      if (name == "") {
        this.PremisesNameList();
      } else {
        this.PremisesNameList(name);
      }
      if (name && this.result) {
        document.getElementById("searchResult").style.display = "block";
      } else {
        document.getElementById("searchResult").style.display = "none";
      }
    },
    selectedLoupan(id, name) {
      this.loupan.id = id
      this.loupan.name = name
      document.getElementById("searchResult").style.display = "none";
      this.insertform.premisesId = this.loupan.id;
    },
    PremisesNameList() {
      this.axios.post("http://localhost:9999/house-resource/tbPremisesInfo/list", this.loupan).then((res) => {
        console.log(this.loupan)
        this.result = res.data.obj;
      })
    },
    onSubmit() {
      var url = this.insertform.id == null ? "tbHouseInfo/saveHouseRoom" : "room/roominfo/updateHouseRoom";
      var name = this.loupan.name;
      if (this.insertform.reserve1 == 0) {
        this.addform.roomCode = "01";
        this.addform.proportion = this.insertform.proportion;
        this.addform.direction = this.insertform.direction;
        this.addform.floor = this.insertform.floor;
        this.insertform.roomInfoList = [];
        this.insertform.status = 0;
        if (this.addform.rental == '') {
          alert('请输入租金');
          return;
        }
      }
      if (this.insertform.premisesId == null || this.insertform.buildingNo == "") {
        alert("请输入正确的楼盘信息");
        return;
      }
      if (this.insertform.decorate == null || this.insertform.decorate === "") {
        alert("请输入装修情况");
        return;
      }
      if (this.insertform.floor == null || this.insertform.floorCount == "") {
        alert("请输入楼层");
        return;
      }
      if (this.insertform.room == null || this.insertform.hall == null
        || this.insertform.room === '' || this.insertform.hall === '') {
        alert("请输入户型");
        return;
      }
      if (this.insertform.manager == null || this.insertform.manager == "") {
        alert("请输入管家");
        return;
      }
      if (this.insertform.proportion == null || this.insertform.proportion == "") {
        alert("请输入房产面积");
        return;
      }
      if (this.insertform.paymentPay == '') {
        alert('请选择付款方式');
        return;
      }

      if (this.insertform.publicFacilityListy == null || this.insertform.publicFacilityListy.length == 0) {
        alert("请选择公共配套");
        return;
      }
      if (this.insertform.reserve1 == 1) {
        if (this.insertform.roomInfoList == null || this.insertform.roomInfoList.length == 0) {
          alert('请添加房源');
          return;
        }
      } else {
        if (this.addform.privateFacilityList.length == 0) {
          alert("请选择房间配套");
          return;
        } else {
          if (this.addform.privateFacilityList.length > 0) {
            var str = '';
            for (var i = 0; i < this.addform.privateFacilityList.length; i++) {
              str = str + this.addform.privateFacilityList[i] + ",";
            }
            this.insertform.roomInfoPrivate = str.substr(0, str.length - 1);
          }
          // if (this.addform.roomImages.length == 0) {
          //   alert("请上传房间区域图片");
          //   return;
          // } else {
          //   this.insertform.roomInfoImages = this.addform.roomImages;
          //   this.addform.frontCover = this.insertform.roomInfoImages[0];
          // }
        }
      }
      if (this.insertform.reserve1 == 0) {
        this.insertform.roomInfoList.push(this.addform);
      }


      for (var i = 0; i < this.insertform.roomInfoList.length; i++) {
        this.insertform.roomInfoList[i].roomName = name + ' ' + this.insertform.room + " 室" + this.insertform.hall + " 厅 " + this.insertform.roomInfoList[i].roomCode;
      }
      // var data = JSON.stringify(this.insertform);
      this.axios.post("http://localhost:9999/house-resource/" + url, this.insertform).then((res) => {
        if (res) {
          console.log(res)
          alert("添加成功")
          this.$router.replace("/RoomStatus");
        } else {
          alert("添加失败")
        }
      })


    },
    // 管家
    guanjia() {
      this.axios.get("http://localhost:9999/house-resource/sysUser/select").then((res) => {
        this.manager = res.data.obj
      })
    },
    // 公共配置
    gonggong() {
      this.axios.get("http://localhost:9999/house-resource/tbPublicFacility/public").then((res) => {
        this.publicFacilityListy = res.data.obj
      })
    },
    // 房间配置
    fangjian() {
      this.axios.get("http://localhost:9999/house-resource/tbPrivateFacility/private").then((res) => {
        this.privateFacilityList = res.data.obj
      })
    },
    // 压****
    yajin() {
      this.axios.get("http://localhost:9999/house-resource/tbRoomInfo/getPaymentMortgageList").then((res) => {
        this.paymentMortgageList = res.data.obj
      })
    },
    // fu****
    fukuan() {
      this.axios.get("http://localhost:9999/house-resource/tbRoomInfo/getPaymentPayList").then((res) => {
        this.paymentPayList = res.data.obj
      })
    },
    checkRentType(value) {
      if (this.insertform.reserve1 == 0) {
        this.showList = true
      } else {
        this.showList = false
      }
      console.log(!this.showList)
    },
    tianjia() {
      this.addform = {
        privateFacilityList: [],
        rental: null,
        roomCode: '',
        decorateStyle: '',
        proportion: '',
        direction: '',
        roomInfoImages:'',
        roomImages:''
      }
      this.dialogFormVisible = true;
    },
    add() {
      this.insertform.roomInfoList.push(this.addform)
      this.dialogFormVisible = false;
      console.log(this.insertform.roomInfoList)
    },
    //房间区域图片上传
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handlePrivateSuccess(file,files){
      var privateFiles = files
      this.privateFiles = privateFiles;
    },
    ossUploadPrivateFile() {
      var formData = new FormData();
      this.privateFiles.forEach(function (file) {
        if (file.raw) {
          console.log(file.raw)
          formData.append("file",file.raw,file.name)
          // formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          console.log(res.data)
          this.addform.roomInfoImages=res.data.name
          // this.insertform.roomInfos[0].roomInfoImages = res.data
          this.insertform.roomInfoList.roomInfoImages= res.data
          alert("上传房间图片成功")
        }
      })
    },
    handlePublicSuccess(file,files){
      var publicFiles = files
      this.publicFiles = publicFiles
      console.log(publicFiles)
    },
    ossUploadPublicFile() {
      var formData = new FormData();
      this.publicFiles.forEach(function (file) {
        if (file.raw) {
          formData.append("file",file.raw,file.name)
          // formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          console.log(res.data)
          this.addform.roomInfoImages = res.data
          this.insertform.roomInfoList.roomInfoImages= res.data
          alert("上传公共图片成功")
        }
      })
    },
  },
  created() {
    this.guanjia()
    this.gonggong()
    this.fangjian()
    this.fukuan()
    this.yajin()
  },
  data() {
    return {
      loupan: {
        name: ''
      },
      insertform: {
        username: '',
        reserve1: 0,
        status: 0,
        buildingNo: '',
        unitNo: '',
        roomNo: '',
        room: '',
        hall: '',
        decorate: '',
        floor: '',
        floorCount: '',
        manager: [],
        proportion: '',
        introduce: '',
        publicFacilityListy: [],
        paymentMortgage: '',
        paymentPay: '',
        roomInfoList: [],
        houseImages: [],
        frontCover: []
      },
      addform: {
        privateFacilityList: [],
        rental: null,
        roomCode: '',
        decorateStyle: '',
        proportion: '',
        direction: '',
        roomImages: [],
        frontCover: [],
        roomInfos: [{
          roomName: '5555'
        }],
      },
      showList: true,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      paymentMortgageList: [],
      publicFacilityListy: [],
      privateFacilityList: [],
      privateFileList:[],
      publicFileList:[],
      paymentPayList: [],
      manager: [],
      result: [],
      gj: ''
    }
  }
}
</script>
<style>
.el-row {
  margin-bottom: 0px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.searchResult {
  position: absolute;
}
</style>
